<template>
  <view class="container">
    <comm-status-bar></comm-status-bar>
    <swiper
      class="swiper"
      circular
      :indicator-dots="swiper.indicatorDots"
      :autoplay="swiper.autoplay"
      :interval="swiper.interval"
      :duration="swiper.duration"
    >
      <swiper-item>
        <view class="swiper-item">
          <image
            src="/static/images/home/banner/1.jpg"
            mode="scaleToFill"
          />
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
          <image
            src="/static/images/home/banner/2.jpg"
            mode="scaleToFill"
        /></view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
          <image
            src="/static/images/home/banner/3.jpg"
            mode="scaleToFill"
        /></view>
      </swiper-item>
    </swiper>

    <view class="grid grid-5 gutter-20 mt-40">
      <view
        class="grid-item"
        v-for="(item, index) in $config.demo.category"
        @click="toCategory(item.id)"
        :key="index"
      >
        <image
          :src="item.icon"
          mode="aspectFit"
        />
        <view class="grid-item-text">{{ item.name }}</view>
      </view>
    </view>

    <view class="section-title">
      <view class="section-title-text">精选教程</view>
      <view
        class="section-title-more"
        @click="toCategory(0)"
        >更多</view
      >
    </view>
    <view class="row list">
      <view
        class="col-2"
        v-for="(item, index) in list"
      >
        <view
          class="list-item mt-20"
          @click="toDetail(item.id)"
        >
          <div
            class="list-item-tag"
            v-if="item.is_vip"
          >
            vip
          </div>
          <view class="list-item-thumb">
            <image :src="item.thumb" />
          </view>
          <view class="list-item-content">
            <view class="list-item-title">{{ item.name }}</view>
            <view class="list-item-desc"
              ><text class="iconfont icon-browse mr-5"></text>{{ item.view_count }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <comm-beian></comm-beian>
    <comm-tabbar></comm-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiper: {
          indicatorDots: true,
          autoplay: true,
          interval: 3000,
          duration: 800,
        },

        list: [],
      };
    },
    onShow() {
      this.getList();
    },
    methods: {
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/detail/index?id=${id}`,
        });
      },

      toCategory(id) {
        console.log("toCategory", id);
        if (id === 0) {
          this.$storage.remove("category_id");
        } else {
          this.$storage.set("category_id", id);
        }

        uni.switchTab({
          url: "/pages/tutorial/index",
        });
      },

      getList() {
        this.$request({
          url: "/list.json",
          method: "GET",
        }).then((res) => {
          let data = this.$utils.reverseArr(res || []);
          console.log("list.json", data);
          //提取前10条数据
          data = data.slice(0, 10);
          this.list = data;
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .swiper {
    height: 400rpx;
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: $box-shadow;
  }
  .swiper-item {
    display: block;
    height: 400rpx;
    line-height: 400rpx;
    text-align: center;
    background-color: $color-primary;
    border-radius: $border-radius;
    overflow: hidden;
    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: $border-radius;
    }
  }

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    border-radius: 10px;

    background-color: #fff;
    box-shadow: $box-shadow;
    image {
      width: 50rpx;
      height: 50rpx;
    }

    &-text {
      font-size: 26rpx;
      color: #999;
    }
  }

  .list {
    margin-top: -20px;
  }
</style>
